<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="main1" style="width: 500px;height: 300px;"></div>
		<div id="main2" style="width: 500px;height: 300px;"></div>
		<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.1/echarts-en.min.js"></script>
		<script type="text/javascript">
			var chart1 = echarts.init(document.querySelector("#main1"));
			var chart2 = echarts.init(document.querySelector("#main2"));
			var option1 = {
				title:{
					text:"模拟数据"
				},
				tooltip:{},
				toolbox:{
					feature:{
						dataView:{
							show:true
						},
						restore:{
							show:true
						},
						dataZoom:{
							show:true
						},
						saveAsImage:{
							show:true
						},
						magicType:{
							type:['line',"bar"]
						}
					}
				},
				legend:{
					data:["销量"]
				},
				xAxis:{
					data:['毛笔','钢笔','铅笔','圆珠笔','签字笔']
				},
				yAxis:{},
				series:[{
					name:"销量",
					type:"line",
					data:[20,5,12,8,50]
				}]
			}
			var option2 = {
				title:{
					text:"模拟数据"
				},
				tooltip:{},
				toolbox:{
					feature:{
						dataView:{
							show:true
						},
						restore:{
							show:true
						},
						dataZoom:{
							show:true
						},
						saveAsImage:{
							show:true
						},
						magicType:{
							type:['line',"bar"]
						}
					}
				},
				legend:{
					data:["销量"]
				},
				xAxis:{
					data:['毛笔','钢笔','铅笔','圆珠笔','签字笔']
				},
				yAxis:{},
				series:[{
					name:"销量",
					type:"bar",
					data:[20,5,12,8,50]
				}]
			}
			chart1.setOption(option1);
			chart2.setOption(option2);
			//可以直接传入需要联动的实例数组
			echarts.connect([chart1, chart2]);
		</script>
	</body>
</html>
